<template>
  <div>
    <el-select
      :size="size"
      v-model="brandId"
      @change="changeBrand"
      @clear="clear"
      :filterable="isfilterable"
      :filter-method="pinyingMatch"
      placeholder="请选择"
      style="width: 100%"
      :clearable="clearable"
      :disabled="disabled"
    >
      <el-option
        :label="item[valuekey.name]"
        :value="item[valuekey.value]"
        v-for="item in brand"
        :key="item[valuekey.value]"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'ElSelect2',
  props: {
    // 必传 传进来的下拉列表
    optionlist: {
      type: Array,
      default: () => []
    },
    // 非必传 传进来的默认的值,不传默认空
    modelValue: {
      type: [String, Number],
      default: ''
    },
    // 非必传 传进来的是否需要过滤，默认为true，如果不需要传false
    isfilterable: {
      type: Boolean,
      default: true
    },
    // 必传 传进来的name和value字段
    valuekey: {
      type: Object,
      required: true
    },
    size: {
      type: String,
      default: 'small'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否可清空
    clearable: {
      type: Boolean,
      default: true
    }
  },
  model: {
    prop: 'modelValue',
    event: 'updateModelValue'
  },
  data() {
    return {
      brandId: this.modelValue, // 初始化为父组件传来的值
      brand: [] // 下拉框所有数据
      // copyBrand: []
    }
  },
  watch: {
    // 传进来的下拉列表数据
    // modelValue() {
    //   // this.brandId = this.modelValue // 赋值为父组件传来的值
    // },
    modelValue: {
      handler(newVal, oldVal) {
        this.brandId = this.modelValue
      },
      immediate: true,
      deep: true
    },
    optionlist: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.brand = [...newVal]
        }
      },
      immediate: true
    }
  },
  methods: {
    // 下拉框设置拼音模糊搜索
    pinyingMatch(val) {
      const pinyingMatch = require('pinyin-match')
      if (val) {
        this.brand = this.optionlist.filter((e) =>
          pinyingMatch.default.match(e[this.valuekey.name], val)
        )
      } else {
        this.brand = [...this.optionlist]
      }
    },
    // 下拉框选择事件
    changeBrand(val) {
      // this.brandId = val // 更新本地值
      this.$emit('updateModelValue', val) // 触发更新事件
      this.$emit('changeSelect', val) // 触发更新事件
    },
    clear() {
      this.brand = [...this.optionlist]
    }
  }
}
</script>
